<style lang="less">
    @import "../../assets/less/menu.less";
</style>
<template>
    <div class="wrapper-header-nav">
        <Menu ref="menus" mode="horizontal" theme="light" :active-name="activeKey" @on-select="handleSelect">
            <div class="layout-logo"></div>
            <div class="layout-nav">
                <Menu-item :name="nav.name" v-for="(nav,index) in navs" :key="index">
                    <Icon :type="nav.icon"></Icon>
                    {{nav.title}}
                </Menu-item>
            </div>
        </Menu>
        <div class="header-aside">
            <Dropdown placement="bottom-end">
                <a href="javascript:void(0)">
                    <Icon type="person"></Icon>
                </a>
                <Dropdown-menu slot="list">
                    <div>
                        <Icon type="ios-person-outline"></Icon>
                        <span>{{userInfo.realname || userInfo.username || ''}}</span>
                    </div>
                    <div class="header-aside-dropdown">
                        <Button @click.native="onChangePassword">修改密码</Button>
                        <Button @click.natvie="onLogout" class="r">退出登录</Button>
                    </div>
                </Dropdown-menu>
            </Dropdown>
        </div>
        <Modal ref="change_password_dialog" v-model="change_password" width="360" title="修改密码">
            <Form :label-width="80">
                <Form-item label="当前密码">
                    <Input v-model="form.password" type="password" placeholder="当前登录密码"></Input>
                </Form-item>
                <Form-item label="新密码">
                    <Input v-model="form.newPassword" type="password" placeholder="新密码"></Input>
                </Form-item>
                <Form-item label="确认密码">
                    <Input v-model="form.newPassword2" type="password" placeholder="确认新密码"></Input>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="text" @click.native="onCancelChange">取消</Button>
                <Button type="primary" icon="checkmark-round" :loading="change_password_loading" @click.native="doChange">确认</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {mapState, mapActions} from 'vuex'
    import cache from '../../commons/cache'
    import * as constants from '../../AppConstants'

    export default {
        data() {
            return {
                appTitle: constants.APP_TITLE,
                activeKey: '',
                change_password: false,
                form: {
                    password: '',
                    newPassword: '',
                    newPassword2: ''
                },
                change_password_loading: false
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.userInfo
            })
        },
        methods: {
            ...mapActions([
                "logout"
            ]),
            handleSelect (name) {
                this.$router.push(this.getNavPath(name))
            },
            getNavPath(name) {
                let menu = this.navs.filter((nav) => nav.name == name)[0]
                return menu.path
            },
            onChangePassword() {
                this.change_password = true
            },
            onCancelChange() {
              this.$refs.change_password_dialog.close()
            },
            doChange() {
                if (!this.form.password) {
                    this.$Message.error('请输入当前密码')
                    return
                }
                if (!this.form.newPassword) {
                    this.$Message.error('请输入新密码')
                    return
                }
                if (!this.form.newPassword2) {
                    this.$Message.error('请输入确认密码')
                    return
                }
                if (this.form.newPassword != this.form.newPassword2) {
                    this.$Message.error('新密码与确认密码不一致')
                    return
                }
                this.change_password_loading = true
                this.$http.put('/sys/sysuser/update_password', this.form).then((resp) => {
                    this.$Message.success('密码修改成功')
                    this.$refs.change_password_dialog.close()
                    this.change_password_loading = false
                }).catch((err) => {
                    console.warn('修改密码失败：', err)
                    this.change_password_loading = false
                })
            },
            onLogout() {
                this.logout(false).then((resp) => {
                    cache.clearAll()
                    this.$router.push("/login")
                }).catch(console.warn.bind(console))
            }
        },
        created () {
            if (this.$route.path == '/') {
                this.activeKey = this.getNav().name
            } else {
                this.activeKey = this.$route.path.split("/")[1]
            }
        }
    }
</script>
